How to Use Webvizio Chrome Extension

Webvizio Chrome extension is designed to make your web feedback and collaboration process smooth and efficient. Whether you’re a web developer, project manager, or part of a QA team, this guide will help you get the most out of Webvizio.

Two Ways to Use Webvizio

You can use our extension in two ways:

1. As a standalone tool to quickly create tasks right on your website
2. As an enhancement to the Webvizio application for even more powerful features

Let’s explore both options!

Using Webvizio Extension as a Standalone Tool

Installation and setup

1. Install our extension from the Chrome Web Store
2. After installation, you’ll see a page where you can either:

• Connect your existing Webvizio profile, or
• Register for a new account if you’re just getting started

3. Pin the Webvizio icon to your toolbar (trust us, you’ll want quick access!)

4. Click the Connect button

5. Navigate to the website or web application where you want to create tasks
6. Click the Webvizio extension icon in the upper right corner of your screen

7. Project Connection:
– If you already have a project with this website’s domain, Webvizio will automatically connect the project to the extension
– If no projects are available, click the Create project button
Note: Creating new projects is only available to Account Owner or Project Manager roles

8. Done! You will see the Webvizio icon on the right side of your website or app. Clicking on the icon will give you access to the Webvizio extension menu.

Task creation and task management

After clicking the Webvizio icon, you’ll see a menu with two items:
1.Create Tasks – enables Task Mode where you can create new tasks and view already created tasks on the current page.
2.Manage Tasks – redirects to the project page in Webvizio App where you can easily navigate and manage tasks of the current project.

New task creation

To create a new task, follow these steps:

1. Сlick on the Create Tasks icon, and click on any element on the website that needs attention
2. Enter the title and description of the task in the new task pop-up window
3. Click on the Create button

Creating tasks on mobile devices

While you can’t install the extension on mobile devices, here’s a pro tip: Use Chrome’s Device Mode to test mobile layouts!

The Webvizio extension is fully compatible and optimized for use with Chrome DevTools’ Device Mode, allowing you to create tasks while testing different device views.

1. Open Chrome DevTools (hit F12 or right-click and select “Inspect”)
2. Turn on Device Mode
3. Pick any mobile device you want to test

Screenshot Annotations

With the Webvizio Chrome Extension, you can edit the automatically generated screenshots:

• Annotate and draw
• Add overlaying text
• Highlight certain areas
• Hide sensitive information
• Leave notes directly on the screenshots

To preview and annotate screenshots, click the “Edit Screenshot” button while the task window is open. A pop-up will appear displaying the screenshot along with the annotation tool interface. Once you have finished editing the screenshot, click the “Save and Close” button at the top of the window to save your changes.

All annotated screenshots are automatically saved to your tasks.

☝️Please note that after saving a task by clicking on “Create,” you will not be able to undo or add new elements to the saved screenshot.

Viewing your tasks

You can view the created tasks in two ways:

1. In the Webvizio application:
   – Click “Tasks Management” in the Webvizio menu for full task management capabilities
   – Use this option when you need to edit tasks, view comments, or access all task management features

2. Directly on your website:
– Click “Create Tasks” in the Webvizio menu to see markers for all open or in-progress tasks
– Click any marker to view task details

Note: Currently this view is simplified – you cannot edit tasks or view comments here (these features are coming in future releases)

Task view window

Each task view provides these options:

• Copy task link – copies the task link from Webvizio App
• Copy task description – copies complete task details with screenshot and technical specs
• Go to task – opens the task in Webvizio app

Exit from Task mode

Press ESC or click the exit icon on the right side of the screen to return to normal website interaction.

Integration with task management tools

Direct Integrations
Tasks can be automatically sent to Jira and ClickUp once you configure the integration.

Alternative Integration Methods
– Use Zapier or Webhooks to connect with other task management systems
– Use the Copy task description feature for systems without direct integration

Using Copy Task Description
When you create a task, all details (including screenshot and technical information) are automatically copied to clipboard. Simply paste this information into any application that supports formatted text.

You can also copy details from existing tasks:
1. Click the task marker on your website
2. Click the Copy task description icon in the popup window

Project management

Each project in Webvizio is connected to a single domain name. Before working with a website or web application, you need to connect a project to the extension:

• Projects matching your website’s domain connect automatically

• No matching project? Click Create project button

If at least one project with the required domain is available in your current account, it will be connected automatically.

Note: Only Account Owners and Project Managers can create new projects

If you have a few projects with the same domain present in your current account, you can select which of them you want to connect to the extension and click Connect Project button.

Profile management

Once you connect your profile to the extension, the connection will remain active even if you logout and change the profile within the Webvizio application. To change the connected profile, click on the Log Out icon in the bottom right corner of the extension popup.

Account Management

In Webvizio, you can be invited to different account teams, where you will get different roles and different available projects.

The extension automatically detects the account you are currently in. You can see the current account name below the profile icon.

In case you switched to a different account within the app, you need to open the extension popup on your website or web application to connect the project from the new account, or create a new one.

Extension as an add-on to the Webvizio application

Benefits of using the extension

Installing the Webvizio Chrome Extension can significantly improve the stability and performance of Webvizio projects.

• The extension allows you to work with password-protected pages of sites/web applications.
• The extension ensures your site content is displayed correctly. If your site displays incorrectly or some page elements do not appear in the regular dashboard, the extension solves this problem.
• It improves task screenshots. When you create a task, Webvizio automatically takes a screenshot. The Webvizio extension boosts the stability of this feature, as the screenshot is being taken from your actual screen, instead of emulating a browser view on the Webvizio’s side.
• It increases the speed of loading tabs. When you install the extension, Webvizio no longer creates a copy of your website page for Webvizio to display, instead, your website is used directly. Thus, the speed of loading tabs is limited only by the speed of loading the pages of your site.

How to work with the extension

The Webvizio extension does not have its own interface and starts working immediately after installation and activation. The only thing you need to do to use the extension is to go to the project settings and check the box “Enable Chrome Extension”.

Important: Please note that after you enable the project mode through the extension, all users who work with this project will have to install the extension.

Working with Web Projects via Webvizio Chrome Extension

To start working on your web projects through the Webvizio Chrome Extension, just follow those simple steps:

1. Search for Webvizio Extension in the Chrome Web Store or through the project settings menu and click the Download Extension for Chrome button

2. Install the Webvizio Chrome extension on your computer

3. Activate it through the Webvizio extension widget in your Chrome browser

4. Open the project you want to work on and enable the extension through the extension interface.

5. You can enable or disable the extension for any project at any time.
That’s it! You are good to go with your usual flow, the extension will do its thing behind the scenes.

Working with Password-protected Website Pages and Web Applications

To be able to work with password-protected pages or applications, follow the steps to set it up:

1. Find the Webvizio extension in the Chrome Web Store through search or the project settings menu > Download Extension for Chrome button

2. Install Webvizio Chrome Extension

3. Activate the Webvizio extension in the Chrome browser

4. Open the project you want to work on and enable the extension through the extension interface.

6. Log in to the site or application you want to work on in the same browser session.

☝️Important! You must log in to your web application through your Chrome browser first (not the Webvizio interface, but directly on the page of your site or application), after that the password-protected pages will become available in Webvizio.

7. Add the URL of the password-protected page/application to the Webvizio project. For example, if you want to work on the application interface in Webvizio, you need to add a page leading to user authentication. For example, to work on the WordPress admin panel https://yousite.com/wp-admin. If the page has already been added, just update it through the interface.

Troubleshooting, using the Webvizio Extension

In some cases, if the installation of the plug-in was performed incorrectly, the system will show the following notifications.

FAQ

Unfortunately, the authentication process is complex and varies across different web applications. Therefore, we cannot guarantee the stable operation of this functionality on all sites/web applications using any technology, if you have problems with this functionality, please contact Webvizio technical support.

---